@ddq:{
  border: 1px solid red;
  box-sizing: border-box;
}
//路径变量
@imgUrl: "../../static/image/thePartyBranch321";
//自适应基准大小
@em:calc(100vw / 375);
//导航区域
.contents {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  font-size: @em;
  display: flex;
  flex-direction: column;
  //导航区域
  .contents-header {
    //logo区域
    .logo {
      height: 144em;
      width: 100vw;
      aspect-ratio:375 / 144;
      background-size: cover;
      background-image: url("@{imgUrl}/banner@2x.png");
      background-repeat: no-repeat;
      img {
        width: 32em;
        height: 32em;
        margin-left: 12em;
        margin-top: 44em;
      }
    }
    //导航栏区域
    .homePage {
      width: 100%;
      height: 56em;
      position: relative;
      top:-16em;
      .navigations {
        width: 355em;
        height: 56em;
        border-radius: 8em;
        margin: 0 auto;
        background-color: #EFEFEF;
        display: grid;
        justify-content: space-evenly;
        align-items: center;
        grid-auto-flow:column;
        a {
          color: #666060;
        }
        .navigation {
          font-size: 14em;
          text-align: center;
          font-weight: 400;
          display: grid;
          align-items: center;
        }

        .active {
          height: calc(48em / 14);
          display: inline-block;

          padding: 0 calc(13em / 14);
          background: #FFFFFF;
          border-radius: calc(6em / 14);
          color: #333030;
          font-weight: 700;
          line-height:  calc(48em / 14);
        }
      }
    }
  }
  //内容区域
  .contents-main {
    flex: 1;
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch;
    scroll-behavior: smooth;
    z-index: 11;
    height: calc(100vh - 200em);
    //筛选弹窗
    /deep/.branchTask {
      .van-picker-column:nth-child(1) {
        width: 50em;
        flex: 0.4;
        .van-picker-column__item {
          justify-content: center;
        }
      }
      .van-picker-column:nth-child(2) {
        .van-ellipsis {
          overflow: scroll;
          white-space:normal;
        }
        .van-picker-column__item {
          justify-content: start;
        }
      }
    }
    //筛选区域
    .screening {
      width: 100%;
      height: 40em;
      display: flex;
      justify-content: center;
      .theMenu {
        width: 355em;
        display: flex;
        height: 100%;
        padding: 0 5em;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        background-image: linear-gradient(270deg, #FFF7EF 0%, #FFB1AD 99%);
        border-radius: 8em;
        span {
          font-size: 14em;
          color: #666060;
          font-weight: 400;
        }
      }
    }
    //展开折叠样式
    /deep/.van-collapse.van-hairline--top-bottom {
      //头部区域
      .van-cell.van-cell--clickable.van-collapse-item__title {
        font-size: 16em;
        color: #333030;
        font-weight: 600;
        //标题
        .titleCard {
          flex: 3;
          .title {
            display: flex;
            align-items: center;
            img {
              width: calc(22em / 16);
              margin-right: 0.5em;
            }
          }

        }
        //展开收起
        .valueCard {
          font-size: calc(15em / 16);
          color: #999090;
          font-weight: 400;
        }
        //右箭头
        i.van-icon.van-icon-arrow.van-cell__right-icon {
          font-size: 1em;
        }
      }
      //内容区域
      .van-collapse-item__content {
        padding: 0;
      }
    }

    //卡片
    .cards {
      font-size: @em;
      padding-top: 10em;
      .card {
        width: 355em;
        height: auto;
        background: #FFFFFF;
        box-shadow: 0 0 6em 0 rgba(0,0,0,0.10);
        border-radius: 4em;
        margin: 0 auto 10em;
        padding: 12em 8em;
        box-sizing: border-box;
        //卡片头部
        .card-header {
          width: 339em;
          height: auto;
          box-sizing: border-box;
          display: grid;
          align-items: center;
          align-content: space-between;
          //标题
          .theTitle {
            display: grid;
            grid-template-columns:20em 279em 20em;
            justify-content: space-between;
            box-sizing: border-box;
            align-items: center;
            margin-bottom: 8em;
            .theSerialNumber {
              font-size: 14em;
              width: calc(20em / 14);
              height: calc(20em / 14);
              background: #fbd2d7;
              border-radius: calc(4em / 14);
              color: #ec2942;
              line-height: calc(20em / 14);
              text-align: center;
              box-sizing: border-box;
            }
            .title {
              width: 100%;
              height: auto;
              font-size: 14em;
              color: #333030;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
              line-height: 1.5em;
            }
            .icon {
              img {
                width: 20em;
                height: 20em;
              }
            }
          }
        }
        //卡片内容
        .card-main {
          width: 339em;
          height: 72em;
          margin: 8em 0 12em;
          box-sizing: border-box;
          background: #FAFAFA;
          display: grid;
          grid-template-columns: 1fr 1em 1fr 1em 1fr 1em 1fr;
          align-items: center;
          padding: 0 0 12em 0;
          //竖线
          .line {
            width: 1em;
            height: 20em;
            background: #DDDDDD;
          }
          //选项
          .item {
            text-align: center;
            height: 100%;
            padding: 0 10em;
            display: flex;
            flex-direction: column;
            .item-title {
              flex: 1;
              display: flex;
              align-items: center;
              font-size: 12em;
              color: #333030;
              font-weight: 500;
              line-height: calc(16em / 12);
            }
            .item-keywords {
              height: calc(20em / 13);
              line-height: calc(20em / 13);
              font-size: 13em;
              color: #999090;
              font-weight: 400;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              line-clamp: 1;
              -webkit-box-orient: vertical;
            }
          }
        }
        //卡片尾部
        .card-footer {
          width: 339em;
          height: 16em;
          box-sizing: border-box;
          line-height: 16em;
          color: #666060;
          display: grid;
          grid-template-columns: 70em 1em 80em 1em 120em;
          align-items: center;
          justify-content: space-between ;
          //竖线
          .line {
            width: 1em ;
            height: 12em;
            background: #DDDDDD;
          }
          //选项
          .options {
            font-size: 11em;
            color: #666060;
            font-weight: 400;
            display: flex;
            justify-content: space-around;
            .state {
              text-align: center;
              display: inline-block;
              width: calc(36em / 11);
              height: calc(16em / 11);

              border-radius: calc(2em / 11);
            }
            .state-green {
              background: #e9feea;
            }
            .state-red {
              background: #feece9;
            }
          }
        }
        //支部任务卡片尾部
        .branchCard-footer {
          width: 339em;
          height: 16em;
          box-sizing: border-box;
          line-height: 16em;
          color: #666060;
          display: grid;
          grid-template-columns: 79em 1em 160em;
          align-items: center;
          justify-content: space-between ;
          //竖线
          .line {
            width: 1em ;
            height: 12em;
            background: #DDDDDD;
          }
          //选项
          .options {
            font-size: 11em;
            color: #666060;
            font-weight: 400;
            display: flex;
            justify-content: space-between;
          }
        }
      }
      .noData {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-bottom: 10em;
        img {
          width: 142em;
        }
        span {
          font-size: 12em;
          color: #999090;
          font-weight: 400;
        }
      }
    }


  }
  //详细信息
  /deep/.theDetailedInformation {
    font-size: @em;
    //导航栏
    .header-theDetailedInformation {
      box-sizing: border-box;
      width: 100%;
      background-image: linear-gradient(102deg, #E82C1C 0%, #CA202B 100%);
      height: calc(44em / 16);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16em;
      color: #FFFFFF;
      font-weight: 500;
      i.van-icon.van-icon-arrow-left {
        position: relative;
        left: calc(-140em / 16);
      }
    }
    main {
      overflow-y: scroll;
      -webkit-overflow-scrolling:touch;
      scroll-behavior: smooth;
      height: calc(100vh - 48em);
      //标题logo
      .titleLogo {
        width: 213em;
        height: 44em;
        background-image: url("@{imgUrl}/titleLogo@2x.png");
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        margin: 20em 0;
        //logo
        img {
          width: 28em;
          margin: 0 4em 0 8em;
        }
        //标题
        span {
          font-size: 16em;
          color: #FFFFFF;
          font-weight: 500;
        }
      }
      //内容区域
      .theBasicInformation {
        padding: 0 10em;
        .cardList {
          background: #FAFAFA;
          border-radius: 4em;
          padding: 12em 8em;
          margin-bottom: 10em;
          display: flex;
          justify-content: space-between;
          span:first-child{
            flex: 1;
            font-size: 12em;
            color: #666060;
            font-weight: 400;
          }
          span:last-child{
            flex: 3;
            font-family: PingFangSC-Medium;
            font-size: 14em;
            color: #333030;
            text-align: right;
            font-weight: 500;
          }
          .state-green {
            font-size: 1em!important;
            background: #e9feea;
          }
          .state-red {
            font-size: 1em!important;
            background: #feece9;
          }
        }
      }
      //工作子项
      .workItems {
        color: #333030;
        font-weight: 600;
        padding: 0 10em;
        font-size: @em;
        //展开收起样式
        .van-collapse-item{
          margin-bottom: 8em;
          //标题
          .workItems-titleCard {
            display: flex;
            flex: 3;
            font-size: @em;
            .theSerialNumber {
              font-family: Roboto-BlackItalic;
              font-size: 16em;
              font-weight: 900;
              background-image: linear-gradient(180deg, #E32A1E , #FF542C);
              color: transparent;
              -webkit-background-clip: text;
              margin-right: calc(3em / 16);
              font-style:italic
            }
            .title {
              display: flex;
              align-items: center;
              font-family: PingFangSC-Medium;
              font-size: 14em;
              color: #333030;
              font-weight: 500;
              padding-left: calc(3em / 14);
              background-image: linear-gradient(90deg, rgba(255,88,101,0.53) 0%, rgba(255,177,164,0.00) 100%);
            }
          }
          //展开收起
          .workItems-valueCard {
            font-size: 12px;
            color: #999090;
            font-weight: 400;
          }
          //右箭头
          i.van-icon.van-icon-arrow.van-cell__right-icon {
            font-size: 1em;
          }
          .van-cell.van-cell--clickable.van-collapse-item__title.van-collapse-item__title--expanded, .van-collapse-item__content {
            background: #FAFAFA;
          }
          .van-cell.van-cell--clickable.van-collapse-item__title.van-collapse-item__title--expanded {
            border-radius: 4em 4em 0 0;
            font-size: @em;
          }
          .van-collapse-item__content {
            border-radius:  0 0 4em 4em;
            font-size: @em;
          }
        }
        .item {
          padding: 12em 16em;
          border-bottom: 1em solid #EEEEEE;
          .title {
            font-family: PingFangSC-Regular;
            font-size: 12em;
            color: #666060;
            font-weight: 400;
            margin-bottom: calc(8em / 12);
          }
          .content {
            font-family: PingFangSC-Medium;
            font-size: 14em;
            color: #333030;
            font-weight: 500;
          }
        }
        //暂无数据
        .temporarilyNoData {
          width: 100%;
          height: 50em;
          text-align: center;
          color: #999090;
          line-height: 50em;
        }
        //去除下划线
        .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
          border: none;
        }

      }
    }
  }
}



